import axio from "../assets/axio.js";

export const view_chat = {
  template: `
     <div id="view_chat">
        <header>
          <div class="myswitch" >
            <label class="switch-label" for="switch">自动刷新</label>
            <input class="switch-input" type="checkbox" id="switch" @click="handleSwitchAutoRefresh" />
            <label class="switch-button" for="switch">
              <div></div>
            </label>
          </div>
          <div class="createOne">
            <button @click="handleNewOne">+新建一条</button>
          </div>
        </header>
        <main>
          <div class="chatContainer">
            <div class="newone_mask" :class="newText.status?'active':''">
              <div class="chat-item" >
                  <section class="h">
                    <span>{{newText.from}}</span>
                    <span>{{formatDate(newText.time)}}</span>
                  </section>
                  <hr />
                  <section class="b">
                    <textarea v-model="newText.content" placeholder="[textarea]Please input here" rows="4"></textarea>
                  </section>
                  <hr />
                  <section class="b">
                    <div>
                      <button  @click="newText.content=''">清空输入</button>
                    </div>
                    <div>
                      <button style="margin-right:1rem" @click="handleCancel">关闭/取消</button>
                      <button @click="handleSubmit">发送</button>
                    </div>
                  </section>
                </div>
            </div>
            <div class="chat-item" v-for="item in textflow">
              <section class="h">
                <span>{{item.from}}</span>
                <span>{{formatDate(item.time)}}</span>
              </section>
              <hr />
              <section class="b">
                <p>{{item.content}}</p>
              </section>
            </div>
            <div>
            <button  @click="handleClear">清空文本</button>
          </div>
          </div>

        </main>
      </div>    `,
  name: "view_chat",
  data() {
    return {
      autoRefresh: false,
      textflow: [],
      timer: null,
      newText: { status: false, time: 0, from: "", content: "" },
    }
  },
  methods: {
    handleSwitchAutoRefresh() {
      console.log(1);
      this.autoRefresh ? this.autoRefresh = false : this.autoRefresh = true
    },
    queryText() {
      axio.get('/chat/queryText')
        .then((response) => {
          console.log('querying')
          this.textflow = JSON.parse(response)
        })
    }, handleNewOne() {
      this.newText.status = true
      this.newText.time = new Date()
      this.newText.time = this.newText.time.getTime()
      this.newText.from = '127.0.0.1'

    }, handleCancel() {
      this.newText.status = false

    }, handleSubmit() {
      axio.post('/chat/submitText', JSON.stringify(this.newText))
        .then((response) => {
          console.log('submit success');
          this.textflow.push(this.newText)
          this.textflow.status = false
          this.textflow.content = ''
        })
    }, handleClear() {
      axio.get('/chat/clearText')
        .then((response) => {
          this.queryText()
        })
    }
  },
  computed: {
    formatDate() {
      return (timestamp) => {
        let date = new Date(timestamp);  // 参数需要毫秒数，所以这里将秒数乘于 1000
        const hh = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
        const mm = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
        const ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return hh + mm + ss
      }
    },
  },
  watch: {
    autoRefresh(nv, ov) {
      if (nv) {
        console.log('start auto refresh');
        this.timer = setInterval(() => {
          this.queryText()
        }, 2000)
      } else {
        console.log('stop auto refresh');
        clearTimeout(this.timer)
      }

    }
  },
  mounted() {
    this.queryText()
    //this.autoRefresh = true
  },
  onBeforeUnmount() {
    console.log('unrefresh');
    this.autoRefresh = false
    this.timer = false
  }
};

